<template>
	<view class="">
		<view class="fy-dropdown-floor">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll" style="height: 490rpx;">
				<view class="fy-dropdown-floor_item" v-for="(item, index) in options" :key="index">
					<view class="greater">
						<text class="fy-dropdown-floor_title" v-if="item.title !== ''">{{ item.title }}</text>
						<text @click="clickMore(index)" style="font-size:20rpx;">更多…</text>
					</view>
					<view class="fy-dropdown-floor_ul">
						<text
							:class="['fy-dropdown-floor_li', selected[item.key].indexOf(cell.value) > -1 ? 'fy-dropdown-floor_li__active' : '']"
							v-for="(cell, cellIndex) in item.list" :key="cellIndex"
							@click.stop.prevent="handlerCellClick(item.key, cell.value)"
							v-if="cellIndex < 6 ? true : more[index]">
							{{ cell.text }}
						</text>
						<!-- 判断循环cellIndex列表的数据小于6时，显示6条 -->
						<!-- v-if="cellIndex < 6 ? true : more[index]" -->
					</view>
				</view>
			</scroll-view>
			<view class="fy-dropdown-button-list">
				<button class="fy-dropdown-button-item" @click.stop.prevent="handlerCancel">
					<text class="fy-dropdown-button-text" :style="{ color: cancelColor }">重置</text>
				</button>
				<text class="fy-dropdown-button-border-left"></text>
				<button class="fy-dropdown-button-item" @click.stop.prevent="handlerConfirm">
					<text class="fy-dropdown-button-text" :style="{ color: confirmColor }">确定</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 选项数据，如果传入了默认slot，此参数无效
			options: {
				type: Array,
				default () {
					return [];
				}
			},
			cancelColor: {
				type: String,
				default: '#333333'
			},
			confirmColor: {
				type: String,
				default: '#B4001E'
			}
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				selected: {}, // 存储选中的值
				list: [],
				more: [] // 点击显示更多
			};
		},
		created() {
			console.log(this.list.length);
			// 判断数据有多少？
			for (let i = 0; i < this.list.length; i++) {
				this.more.push(false);
			}
			// 默认第一个显示
			// this.more[0] = true;
		},
		watch: {
			options: {
				immediate: true,
				deep: true,
				handler: function(list) {
					this.list = list;
					for (var i = 0, len = list.length; i < len; i++) {
						if (list[i]['key']) {
							this.$set(this.selected, list[i]['key'], list[i]['default']);
						}
					}
				}
			}
		},
		methods: {
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop;
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
			},

			// 点击"更多"显示隐藏
			clickMore(index) {
				// console.log(this.more[index]);
				let blur = !this.more[index];
				this.$set(this.more, index, blur);
			},
			//选中下拉框中的选项时
			handlerCellClick(key, data) {
				var selectdata = this.selected[key];
				var idx = selectdata.indexOf(data);
				if (idx > -1) {
					selectdata.splice(idx, 1);
				} else {
					selectdata.push(data);
				}
				this.$set(this.selected, key, selectdata);
			},
			handlerCancel() {
				var list = this.list;
				for (var i = 0, len = list.length; i < len; i++) {
					if (list[i]['key']) {
						this.$set(this.selected, list[i]['key'], list[i]['defaultReset']);
					}
				}
				// this.$emit('success', { cancel: true, type: 'column', })
			},
			getParent(name = undefined) {
				try {
					let parent = this.$parent;
					// 通过while历遍，这里主要是为了H5需要多层解析的问题
					while (parent) {
						// 父组件
						if (parent.$options && parent.$options.name !== name) {
							// 如果组件的name不相等，继续上一级寻找
							parent = parent.$parent;
						} else {
							return parent;
						}
					}
					return false;
				} catch (err) {
					console.log(err);
					return false;
				}
			},
			handlerConfirm() {
				let parent = this.getParent.call(this, 'fy-dropdown');
				parent.close();
				try {
					this.$emit('success', {
						confirm: true,
						type: 'column',
						data: JSON.parse(JSON.stringify(this.selected))
					});
				} catch (err) {
					this.$emit('success', {
						confirm: true,
						type: 'column',
						data: JSON.parse(JSON.stringify(this.selected))
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}

	// @include vue-flex;

	.fy-dropdown-floor {
		width: 100%;
		background-color: #ffffff;
		// background-color: aquamarine;
		border-top: 1px solid #f2f2f2;
		position: fixed;
		top: 200rpx;
		border-radius: 0 0 10px 10px;
		z-index: 999;
	}

	// 筛选渲染内容
	.fy-dropdown-floor_item {
		// height: 680rpx;
		// overflow: hidden;
		margin-top: 42rpx;
	}

	.fy-dropdown-floor_title {
		font-size: 30rpx;
		color: #333333;
		padding-bottom: 6rpx;
		margin-left: 40rpx;
		font-weight: bold;
	}

	.fy-dropdown-floor_ul {
		@include vue-flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 40rpx 0 20rpx;
	}

	// 需要循环的数据
	.fy-dropdown-floor_li {
		border: 1px solid #efefef;
		height: 52rpx;
		width: 30%;
		line-height: 49rpx;
		text-align: center;
		border-radius: 26rpx;
		background-color: #efefef;
		// background-color: red;
		color: #898989;
		font-size: 26rpx;
		margin-left: 2.2%;
		margin-top: 20rpx;
		/*溢出隐藏,超出部分变成省略号*/
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.fy-dropdown-floor_li__active {
		border-color: #b5001e;
		color: #b5001e;
		background-color: #ffffff;
	}

	// 重置确定
	.fy-dropdown-button-list {
		// margin-top: 50%;
		@include vue-flex;
		align-items: center;
		border-top: 1px solid #f6f6f6;
	}

	.fy-dropdown-button-item {
		@include vue-flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 100rpx;
		background-color: #ffffff;
		border-radius: 0 0 20rpx 20rpx;
		border-width: 0rpx;

		/* #ifndef APP-NVUE */
		&::after {
			border: none;
		}

		/* #endif */
	}

	.fy-dropdown-button-text {
		font-size: 30rpx;
	}

	.fy-dropdown-button-border-left {
		width: 1px;
		height: 100rpx;
		background-color: #f2f2f2;
		transform: scaleX(0.7);
	}

	// 点击更多显示隐藏
	.greater {
		width: 85%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		// background-color: aqua;
	}
</style>
